<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>上海榕兔信息科技有限公司</title>

    <!-- Global stylesheets -->

    <link th:href="@{/assets/css/icons/icomoon/styles.css}" rel="stylesheet" />
    <link th:href="@{/assets/css/bootstrap.css}" rel="stylesheet"/>
    <link th:href="@{/assets/css/core.css}" rel="stylesheet"/>
    <link th:href="@{/assets/css/components.css}" rel="stylesheet"/>
    <link th:href="@{/assets/css/colors.css}" rel="stylesheet"/>
    <!-- /global stylesheets -->

    <!-- Core JS files -->
    <script type="text/javascript" th:src="@{/assets/js/plugins/loaders/pace.min.js}"></script>

    <script type="text/javascript" th:src="@{/assets/js/core/libraries/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/core/libraries/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/plugins/loaders/blockui.min.js}"></script>

    <script type="text/javascript" th:src="@{assets/js/plugins/forms/validation/validate.min.js}"></script>
    <script type="text/javascript" th:src="@{assets/js/plugins/forms/validation/localization/messages_zh.min.js}"></script>
    <!-- /core JS files -->


    <!-- Theme JS files -->
    <script type="text/javascript" th:src="@{/assets/js/core/app.js}"></script>
    <!-- /theme JS files -->

    <script type="text/javascript" th:src="@{/assets/js/core/app.js}"></script>
    <script type="text/javascript" th:src="@{/javascripts/common/base.js}"></script>
    <script type="text/javascript" th:src="@{assets/js/plugins/notifications/jgrowl.min.js}"></script>



</head>

<body class="login-container login-cover">

<!-- Main navbar -->
<!--<div class="navbar navbar-inverse">
    <div class="navbar-header">
        <a class="navbar-brand" href="index.html"><img src="assets/images/logo_light.png" alt=""/></a>

        <ul class="nav navbar-nav pull-right visible-xs-block">
            <li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
        </ul>
    </div>

    <div class="navbar-collapse collapse" id="navbar-mobile">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#">
                    <i class="icon-display4"></i> <span class="visible-xs-inline-block position-right"> Go to website</span>
                </a>
            </li>

            <li>
                <a href="#">
                    <i class="icon-user-tie"></i> <span class="visible-xs-inline-block position-right"> Contact admin</span>
                </a>
            </li>

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-cog3"></i>
                    <span class="visible-xs-inline-block position-right"> Options</span>
                </a>
            </li>
        </ul>
    </div>
</div>-->
<!-- /main navbar -->


<!-- Page container -->
<div class="page-container">

    <!-- Page content -->
    <div class="page-content">

        <!-- Main content -->
        <div class="content-wrapper" style="padding-top: 120px;">

            <!-- Content area -->
            <div class="content">

                <!-- Simple login form -->
                <form id="login_form">
                    <div class="panel panel-body login-form">
                        <div class="text-center">
                            <div class="icon-object border-slate-300 text-slate-300"><i class="icon-reading"></i></div>
                            <h5 class="content-group">后台管理系统</h5>
                        </div>

                        <div class="form-group has-feedback has-feedback-left">
                            <input type="text" class="form-control" placeholder="请输入用户名" name="username"/>
                            <div class="form-control-feedback">
                                <i class="icon-user text-muted"></i>
                            </div>
                        </div>

                        <div class="form-group has-feedback has-feedback-left">
                            <input type="password" class="form-control" placeholder="请输入密码" name="password"/>
                            <div class="form-control-feedback">
                                <i class="icon-lock2 text-muted"></i>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-block">登录 <i class="icon-circle-right2 position-right"></i></button>
                        </div>

                    </div>
                </form>
                <!-- /simple login form -->


                <!-- Footer -->
                <div class="footer text-muted text-center">
                    <a href="#">© Copyright 2018 上海榕兔信息科技有限公司</a>
                </div>
                <!-- /footer -->

            </div>
            <!-- /content area -->

        </div>
        <!-- /main content -->

    </div>
    <!-- /page content -->

</div>
<!-- /page container -->

</body>
<script type="text/javascript">

    $(function () {
        $("#login_form").validate({
            ignore: 'input[type=hidden]',
            errorClass: 'validation-error-label',
            successClass: 'validation-valid-label',
            highlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            // Different components require proper error label placement
            errorPlacement: function (error, element) {
                // Styled checkboxes, radios, bootstrap switch
                if (element.attr("type") == "checkbox") {
                    error.appendTo(element.parent().parent().parent().parent().parent().parent().parent());
                } else if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container')) {
                    if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                        error.appendTo(element.parent().parent().parent().parent());
                    }
                    else {
                        error.appendTo(element.parent().parent().parent().parent().parent());
                    }
                }

                // Unstyled checkboxes, radios
                else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
                    error.appendTo(element.parent().parent().parent());
                }

                // Input with icons and Select2
                else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) {
                    error.appendTo(element.parent());
                }

                // Inline checkboxes, radios
                else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                    error.appendTo(element.parent().parent());
                }

                // Input group, styled file input
                else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
                    error.appendTo(element.parent().parent());
                }
                else {
                    //console.log(error);
                    //console.log(element);
                    error.insertAfter(element);
                }
            },
            validClass: "validation-valid-label",
            success: function (label) {
                label.remove();
            },
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true
                }
            },
            messages: {
                username: {
                    required: "用户名不能为空"
                },
                password: {
                    required: "密码不能为空"
                }
            },
            submitHandler: function (form) {
                var username = $("input[name=username]").val();
                var password = $("input[name=password]").val();


                $.ajax({
                    url: '/management_system/toLogin',
                    type: 'GET',
                    data: {username: username, password: password},
                    dataType: 'JSON',
                    success: function (data) {
                        if(data.code == 0){
                            //登陆成功跳转
                            var menu = '课程列表';
                            window.location.href="/management_system/courseList?menu=" + menu;
                        }else{
                            showErrorMessage("用户名或者密码错误！");
                        }

                    },
                    error: function (error) {
                        console.log(error);
                        showErrorMessage("用户名或者密码错误！");
                    }
                });

            }
        });

    });




</script>
</html>
